<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>暖心提示</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      background-color: #000;
      overflow: hidden;
    }
    .popup {
      position: fixed;
      padding: 8px 12px;
      border-radius: 6px;
      color: #fff;
      font-family: "微软雅黑", sans-serif;
      text-align: center;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
      animation: fadeIn 0.4s ease-in-out;
      font-size: 14px;
      border: 1px solid rgba(255, 255, 255, 0.2);
    }
    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: scale(0.8);
      }
      to {
        opacity: 1;
        transform: scale(1);
      }
    }
  </style>
</head>
<body>
  <script>
    const messages = [
      "保持好心情哦", "我想你了", "多喝水哦~", "记得吃水果",
      "每天都要开开心心的哦", "期待下次的见面", "别熬夜啦",
      "万事如意", "顺顺利利", "愿所有烦恼都消失",
      "今天有没有开心嘛", "天冷了多穿衣服", "照顾好自己",
      "保持微笑呀", "早点休息", "一切都会好起来的",
      "你真的很棒", "要好好爱自己", "每天都是新的开始",
      "记得好好吃饭", "加油哦", "你值得被爱", "别太累了",
      "要开心呀", "一切顺利", "好好生活", "好好睡觉",
      "好好吃饭", "爱你哦", "想你了", "照顾好自己呀",
      "今天过得开心吗", "保持微笑呀", "别熬夜", "早点休息"
    ];

    const colors = [
      "#FF6B6B", "#4ECDC4", "#FFD166", "#A287F4", "#45B7D1", 
      "#FF7F98", "#98C1D9", "#F9E79F", "#D6E6F2", "#77DD77",
      "#FFA07A", "#BA55D3", "#87CEEB", "#F0E68C", "#FFC0CB",
      "#FF4500", "#228B22", "#4169E1", "#FF69B4", "#DAA520"
    ];

    function createPopup() {
      const message = messages[Math.floor(Math.random() * messages.length)];
      const color = colors[Math.floor(Math.random() * colors.length)];

      const popup = document.createElement("div");
      popup.className = "popup";
      popup.textContent = message;
      popup.style.backgroundColor = color;

      const windowWidth = window.innerWidth;
      const windowHeight = window.innerHeight;
      const left = Math.random() * (windowWidth - 150);
      const top = Math.random() * (windowHeight - 60);
      popup.style.left = `${left}px`;
      popup.style.top = `${top}px`;

      document.body.appendChild(popup);

      setTimeout(() => {
        popup.style.opacity = "0";
        popup.style.transition = "opacity 0.5s ease-in-out";
        setTimeout(() => {
          document.body.removeChild(popup);
        }, 400);
      }, 1500 + Math.random() * 2500);
    }

    window.onload = () => {
      setInterval(createPopup, 300);
    };
  </script>
</body>
</html>